<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        
    </div>

    <script src="./js/react18.js"></script>
    <script src="./js/react-dom18.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"> </script>

    <script type="text/babel">

        // 创建一个根对象：
        let root = ReactDOM.createRoot(document.getElementById("box"));

        // 一、在hooks没有出现之前。
        // 1、无状态组件：函数里没法处理状态。所以，无状态组件都用函数式组件实现。
        // 2、有状态组件用类来实现。


        // 无状态组件和有状态组件的配合：
        // 1）、无状态组件主要负责展示（呈现），不做逻辑处理
        // 2）、有状态组件主要负责逻辑处理。

        const BookDetail=(props)=>(
            <li>
                <p>编号：{props.id}</p>
                <p>书名：{props.name}</p>
                <p>作者：{props.author}</p>

            </li>
        )    

        class MyBook extends React.Component {

            constructor(props) {
                super();
                this.state = {
                    books:[
                        {
                            id:"01001",
                            name:"三国演义",
                            author:"罗贯中"
                        },
                        {
                            id:"01002",
                            name:"四国演义",
                            author:"范旭康"
                        }
                    ]
                }
            }

            // 添加
            addBook(){
                this.setState({
                    books:[
                        ...this.state.books,
                        {
                            id:"01003",
                            name:"五国演义",
                            author:"刘梁涛"
                        }
                    ]
                })
            }

            // 删除

            // 修改

            render() {
                return (
                    <div>
                        <h1>书籍列表</h1>
                        <input type="button" value="添加一本书" onClick={()=>this.addBook()} />
                        <ul>
                            {this.state.books.map(item=><BookDetail key={item.id} {...item} />)}
                        </ul>
                    </div>
                )
            }
        }


        const jsx = (
            <div>
                <MyBook />
            </div>)


        // 把jsx渲染到根对象对应的dom容器里
        root.render(jsx);


    </script>
</body>

</html>